<style lang="scss" scoped>
.doc {
    background: #f3f1f1;
    overflow: hidden;
}

.header {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.83rem;
    font-weight: 400;
    background-color: rgba(243, 220, 169, 0.849);
    color: rgba(86, 62, 7, 0.849);
    padding-left: 1.5rem;
    position: relative;

    span {
        position: absolute;
        right: 1rem;
    }
}

.zhuye {
    width: 95%;
    height: 13rem;
    padding: 0.625rem;
    background: white;
    margin: 0.625rem;

    .top {
        width: 100%;
        display: flex;

        .left {
            width: 77%;

            .name {
                font-size: 0.88rem;
                font-weight: 400;
            }

            .hospital {
                font-size: .88rem;
                font-weight: 400;
                margin: .5rem 0;

                span {
                    font-size: 1rem;
                    color: #ccc;
                }
            }

            .pingfen {
                display: flex;
                height: 1.25rem;
                line-height: 1.25rem;

                span {
                    display: flex;
                    margin-right: 1rem;

                    p {
                        font-size: .88rem;
                        font-weight: 400;
                    }

                    img {
                        width: .9375rem;
                        height: .9375rem;
                    }
                }

                .span::after {
                    width: .5rem;
                    height: .5rem;
                    margin-top: .3rem;
                    border-right: .0625rem solid #ccc;
                    content: "|";
                    color: transparent;
                }
            }
        }

        .right {
            width: 5rem;

            img {
                width: 5rem;
                height: 5rem;
                border-radius: 50%;
                border: .0625rem solid #ccc;
            }

            .gz {
                width: 3.9rem;
                background-color: rgb(213, 247, 222);
                color: rgb(27, 211, 150);
                font-size: .9rem;
                text-align: center;
                border-radius: 1.5rem;
                margin-left: .6rem;
            }
        }
    }

    .bottom {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        left: 1rem;
        z-index: 9999;
        div {
            font-size: .88rem;
            margin: .3em;
            background: #e4eef4;
            color: rgb(44, 116, 224);
            padding: .3rem;
        }
    }
}

.p1 {
    display: flex;
    justify-content: space-around;

    span {
        color: #ccc;
        font-size: .88rem;
    }
}

.grid {
    display: flex;
    text-align: center;

    dl {
        padding: 1rem .625rem;
        background: white;
        border-radius: .3rem;

        dt {
            img {
                width: 2.5rem;
                height: 1.875rem;
            }
        }

        dd {
            .wenzhen {
                color: #ccc;
            }

            .jg {
                color: #ccc;
                font-size: .88rem;
            }
        }
    }
}

.wenzi {
    margin: 1rem .5rem;
    width: 95%;
    padding: 1rem .5rem;
    background: white;
}

.goodat {
    background: white;
    margin: 1rem .5rem;
    width: 95%;
    padding: .5rem;
    border-radius: .5rem;

    h3 {
        margin-bottom: 1rem;
    }

    div {
        // width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 15px;
    }
}

.pingjia {
    background: white;
    margin: 1rem .5rem;
    width: 95%;
    padding: .5rem;
    border-radius: .5rem;

    h3 {
        span {
            margin-left: 230px;
            font-weight: normal;
            font-size: 14px;
            color: #a09e9e;
        }
    }

    .fenlei {
        width: 75%;
        height: 6rem;
        display: flex;
        flex-wrap: wrap;
        margin-left: -.5rem;

        div {
            padding: .5rem;
            font-size: .89rem;
            background: #f1eeee;
            margin: .3em;
        }
    }

    .userpingjia {
        div {
            h4 {
                span {
                    font-weight: normal;
                }

                .tu {
                    background: #e4eef4;
                    color: rgb(44, 116, 224);
                    font-size: .8rem;
                    margin-right: .3rem;
                }

                .wen {
                    background: #f3e4a3;
                    color: rgb(242, 45, 6);
                    font-size: .8rem;
                }

                .date {
                    position: absolute;
                    right: 1.5rem;
                    font-size: .85rem;
                    color: #ccc;
                }
            }

            p {
                display: flex;
                flex-wrap: wrap;

                span {
                    display: flex;
                    margin: .2rem .6rem;
                    color: #ccc;
                }

                .span::after {
                    width: 1rem;
                    height: .7rem;
                    margin-top: .3rem;
                    border-right: .0625rem solid #ccc;
                    content: "|";
                    color: transparent;
                }
            }

            .div {
                width: 95%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: .5rem 0;
            }

            .wenti {
                padding: .6rem;
                background: #ebe8e8;
                color: #a09e9e;
                font-size: .93rem;
            }
        }
    }
}

.di {
    width: 100%;
    background-color: white;
    height: 5rem;
    position: fixed;
    bottom: 0;
    text-align: center;

    button {
        width: 80%;
        height: 3rem;
        border-radius: 1.5rem;
        border: none;
        position: absolute;
        right: 20px;
        bottom: 10px;
        background: #31cd2c;
        color: white;
        z-index: 99999;
    }
}

.active {
    border: 1px solid #31cd2c;
}
</style>
<template>
    <div>
        <div class="doc">
            <p class="header">已通过实名认证 ><span>执业资质已审核通过</span></p>
            <div class="zhuye">
                <div class="top">
                    <div class="left">
                        <h2>{{ doctor.name }}</h2>
                        <p class="name">{{ doctor.clinic_name }} {{ doctor.title }}</p>
                        <p class="hospital">{{ doctor.hospital_name }}
                            <span>></span>
                        </p>
                        <p class="pingfen">
                            <span class="span">
                                <h3>{{ doctor.service_data_list[0].descrip }}</h3>
                                <img :src="doctor.service_data_list[0].icon" alt="">
                            </span>
                            <span class="span">
                                <p>{{ doctor.service_data_list[1].name }}</p>
                                <h3>{{ doctor.service_data_list[1].descrip }}</h3>
                            </span>
                            <span>
                                <p>{{ doctor.service_data_list[2].name }}</p>
                                <h3>{{ doctor.service_data_list[2].descrip }}</h3>
                            </span>
                        </p>
                    </div>
                    <div class="right">
                        <img :src="doctor.image" alt="">
                        <div @click="gz(item)" class="gz">
                            {{ flag ? '取消关注' : '+关注' }}
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div v-for="(item, index) in doctor.new_tags" :key="index">
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <p class="p1">
                <span>保证医生真实</span>
                <span>未使用随时退</span>
                <span>不满意可申诉</span>
            </p>
            <div class="grid">
                <dl @click="tuwen(index)" :class="active === index ? 'active' : ''" v-for="(item, index) in consult"
                    :key="index">
                    <dt>
                        <img :src="item.img" alt="">
                    </dt>
                    <dd>
                        <p>{{ item.title }}</p>
                        <p class="jg">{{ item.price }}</p>
                    </dd>
                </dl>
                <!-- <div v-for="">

                </div> -->
            </div>
            <div class="wenzi">
                <div v-for="(item, index) in word" :key="index">
                    <p v-if="index === active">{{ item.title }}</p>
                </div>
            </div>
            <div class="goodat">
                <h3>擅长与简介</h3>
                <div>
                    {{ doctor.goodat }}
                </div>
            </div>
            <div class="pingjia">
                <h3>患者评价<span @click="checkAll(item)">查看全部<van-icon name="arrow" /> </span></h3>
                <div class="fenlei">
                    <div v-for="(item, index) in doctor.assessment.slice(1,5)" :key="index">
                        {{ item.name }}
                        <!-- <span>({{ }})</span> -->
                    </div>
                </div>
                <div class="userpingjia">
                    <div>
                        <h4>
                            173*******1
                            <span class="tu">图文</span>
                            <span class="wen">满意</span>
                            <span class="date">3月4日</span>
                        </h4>
                        <p>
                            <span class="span">
                                耐心细致
                            </span>
                            <span class="span">
                                讲解很清楚
                            </span>
                            <span>
                                回复很及时
                            </span>
                        </p>
                        <div class="div">
                            张医生很好,很有耐心,爱心,是个值得信赖的好医生！
                        </div>
                        <div class="wenti">
                            问题描述：张医生，您好，我之前咨询过您。(女，31岁)
                        </div>
                    </div>
                    <div>
                        <h4>
                            180*******6
                            <span class="tu">图文</span>
                            <span class="wen">满意</span>
                            <span class="date">2月17日</span>
                        </h4>
                        <p>
                            <span class="span">
                                耐心细致
                            </span>
                            <span class="span">
                                讲解很清楚
                            </span>
                            <span class="span">
                                回复很及时
                            </span>
                            <span>
                                建议很有帮助
                            </span>
                        </p>
                        <div class="div">
                            医生很好,建议很有帮助,很有耐心,讲解详细，谢谢！
                        </div>
                        <div class="wenti">
                            问题描述:一直不孕,不知道什么原因,末次月经是上个月11号(女,26岁)
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="di">
            <img src="../../assets//xin.jpg" alt="" style="position: absolute;left: 10px;bottom: 20px;"
                @click="Toai(item)">
            <p style="position: absolute;left: 15px;bottom: 0px;font-size: 14px;">送爱心</p>
            <button>图文咨询(￥20元/次)</button>

            <div v-for="(item, index) in btn" :key="index">
                <button v-if="index === active" @click="handleClick(index)">
                    {{ item.title }}{{ item.price }}
                </button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import image1 from '@/assets/img/zixun3.png'
import image2 from '@/assets/img/zixun1.png'
import image3 from '@/assets/img/video_03.png'
import image4 from '@/assets/img/zixun2.png'
import axios from 'axios';
const route = useRoute()
const router = useRouter()
const myDoctor = ref<any>(JSON.parse(localStorage.getItem('doctor') || "[]"));
const flag = ref(false)
const doctor = ref<any>([]);

onMounted(() => {

})

console.log(doctor.value);

const list = ref([])
const getlist = async () => {
    await axios.get('/addres/ChunYuperson').then(res => {
        console.log(res)
        list.value = res.data.data
        console.log(list.value)
    }).catch(err => {
        console.log(err)
    })
}
getlist()

const active = ref(0)
const consult = ref([
    {
        title: '图文咨询',
        price: '￥20元/次',
        img: image1,
        flag: true
    },
    {
        title: '电话咨询',
        price: '40元/次',
        img: image2,
        flag: false
    },
    {
        title: '视频咨询',
        price: '￥80元/次',
        img: image3,
        flag: false
    },
    {
        title: '预约就诊',
        price: '暂未开通',
        img: image4,
        flag: false
    }
])
const word = ref([
    {
        title: '通过文字、图片、语音与医生一对一在线沟通',
        flag: true
    },
    {
        title: '通过电话与医生进行选定时长的沟通，可添加病情资料与图片',
        flag: false
    },
    {
        title: '与医生面对面视频资讯，问诊更放心',
        flag: false
    },
    {
        title: '预约就诊',
        price: '暂未开通',
    }
])
const btn = ref([
    {
        title: '图文咨询',
        price: '￥29元/次',
    },
    {
        title: '电话咨询',
        price: '￥40元/次',
    },
    {
        title: '视频咨询',
        price: '￥86元/次',
    },
    {
        title: '预约就诊',
        price: '暂未开通',
    }
])

const checkAll = (item) => {
    router.push({
        path: '/PatientEvaluation',
        query: {
            item: JSON.stringify(item)
        }
    })
}

const gz = (item: any) => {
    console.log(item.doctor_info.doctor_id);
    flag.value = !flag.value
    const items = myDoctor.value.find((items: any) => items.doctor_info.doctor_id !== item.doctor_info.doctor_id);
    console.log(items);

    if (item) {
        myDoctor.value.push([{ ...item, ...myDoctor.value }])
        console.log(myDoctor.value);
    }
    localStorage.setItem('doctor', JSON.stringify(myDoctor.value));


    // if (!flag.value) {
    //     console.log('取消关注');

    // } else {
    //     console.log('关注');
    //     let arrayString = JSON.stringify(doctor.value);
    //     localStorage.setItem('doctor', arrayString);
    //     let storedArrayString = localStorage.getItem("myFruitArray");
    //     // const list = localStorage.setItem('doctor', JSON.stringify(item.id))
    // }

    console.log(items)
}

const tuwen = (index) => {
    active.value = index
}
const Toai = (item: any) => {
    console.log(item);
    router.push({
        path: '/Love',
        query: {
            item: JSON.stringify(doctor.value)
        }
    });
}

const handleClick = (index) => {
    if (index == 0) {
        router.push({ path: '/word' })
    } else if (index == 1) {
        router.push({ path: '/phone' })
    } else if (index == 2) {
        router.push({ path: '/video' })
    }
}
// 获取数据
const item = JSON.parse(route.query.item)
console.log(item);

doctor.value = item
</script>
